<template>
	<view class="tabbar flex flex-around fixed">
		<view  @click="jump(item)" :class="{active:activeIdx==index}" class="menu-item flex-a-c flex-c flex" v-for="(item,index) in menu" :key="index">
			<image class="icon" v-if="item.icon" :src="item.icon"></image>
			<text class="name">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIdx:0,
				menu:[
					{
						name:'首页',
						path:'/pages/index/index',
						icon:'/static/logo.png'
					},
					{
						name:'推广',
						path:'/pages/extend/index',
						icon:'/static/logo.png'
					},
					{
						name:'数据',
						path:'/pages/data/index',
						icon:'/static/logo.png'
					},
					{
						name:'我的',
						path:'/pages/mine/index',
						icon:'/static/logo.png'
					}
				]
			}
		},
		onShow(){
			console.log('load')	
		},
		mounted() {
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]
			const currentRoute = currentPage.route
			for(let i=0;i < this.menu.length;i++){
				console.log(this.menu[i].path)
				if('/'+currentRoute == this.menu[i].path){
					this.activeIdx = i
					console.log(this.activeIdx)
					break
				}
			}
		},
		methods: {
			jump(info){
				const pages = getCurrentPages()
				const currentPage = pages[pages.length - 1]
				const currentRoute = currentPage.route
				if(('/'+currentRoute) == info.path) return
				uni.redirectTo({
					url: info?.path,
				});
			}
		}
	}
</script>

<style lang="less">
	@import '../../assets/styles/common.less';
	.tabbar{
		bottom: 0;
		left: 0;
		height: @tabarHeight;
		width: 100%;
		background-color: #fff;
		padding: 10rpx 0;
		position: fixed;
		transform: translateZ(0);
		.menu-item{
			padding: 0 15rpx;
			.icon{
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 10rpx;
			}
			.name{
				font-size: 30rpx;				
			}
		}
		.active{
			color:red;
		}
	}
</style>